<template>
    <div class="gc-ball-list" :style="{'justify-content': centerClass(center), width:118 * ballLenth + 100 + 'px', height: 104 * Math.ceil(ballMark.length/ballLenth) + 'px'}">
        <div class="ball-title" 
            v-if="ballTitle != '' ">
           <text class="ball-title-title">{{ ballTitle }}</text>
        </div>
        <div 
            class="ball-list-r"
            :style="{ width:118 * ballLenth + 'px', height: 104 * Math.ceil(ballMark.length/ballLenth) + 'px', 'align-content' :centerClass(center)}">
            <ball
                v-for="item of ballMark"
                :key="item"
                :number="item"
                :type="ballType"
                @castBall="getNum"
                @castLongBall="getLongBall"
                :state="selectBall.indexOf(item) > -1"
                :danState="selectDanBall.indexOf(item) > -1"
            ></ball>
            
        </div>
    </div>
</template>

<script>
    import ball from "@/components/lotteries/components/ball"

    const modal = weex.requireModule("modal")
    export default {
        name:'gc-ball-list',
        props:{
            ballSection:{  //区间球号码[0, 9]
                type:Array,
                required:true
            },
            ballTitle:{ //label标题
                type:String,
                default:''
            },
            center: { //居中方式
                type:String,
                default:'center'
            },

            ballLenth:{ //排列长度
                type:Number,
                default:5
            },

            ballType: {
                type:String,
                default:'basis' // 基础类型 basis 托胆 BileCode
            },

            identification: { //号码的唯一标识
                type:String
            }, 

            maxDanBall:{ //最大胆码数
                type:Number
            },

            isRepetitive:{ //
                type:Boolean,
                default:false
            },
            
            type:String,

            defaultValue:[Number, Array], //默认设置普通号

            defaultDanValue:[Number, Array], //默认设置胆码

            errorCallbak:{ //错误回调 
                type:Function
            }
        },

        data() {
            return {
                ballMark:[],
                longBall:[],
                selectBall:[], //普通号
                selectDanBall:[] //胆码
            }
        },

        components:{
            ball
        },

        watch:{
            defaultValue:{
                handler (value, oldVal) {
                    this.selectBall = Array.isArray(value) ? [].concat(value) : Array.of(value)
                    this.emitFn('castBallList', this.selectBall, this.identification)
                },
                deep: true
            },

            defaultDanValue:{
                handler (value, oldVal) {
                    this.selectDanBall = Array.isArray(value) ? [].concat(value) : Array.of(value)
                    this.emitFn('castDanBallList', this.selectDanBall, this.identification)
                },
                deep: true
            },
        },

        methods:{
            // 重组号码
            generateBall() {
                let i = this.ballSection[0]
                let Max = this.ballSection[this.ballSection.length-1]
                let arr = []
                for(; i <= Max; i ++) {
                    arr.push(i)
                }
                
                return arr
            },
            //过滤排版样式
            centerClass(type) {
                let param = {
                    'left': 'flex-start',
                    'center': 'center',
                    'right': 'flex-end'
                }
                return param[type]
            },
            //选号返回
            getNum(value) {  

                let bassNum = this.selectBall.indexOf(value),
                    BileNum = this.selectDanBall.indexOf(value)

               
                if( !this.conditionFn(value, 'basis') ) return ;

                if( BileNum > -1 ) {
                    this.selectDanBall.splice(BileNum,1)
                } else {
                    bassNum > -1 ? this.selectBall.splice(bassNum,1) : this.selectBall.push(value)
                }
                
                if( this.type === 'simplex') {
                    this.selectBall = [].concat(value)
                }
                
                this.fliterDan()

                this.emitFn('castBallList', this.selectBall)

            },

            //设胆码返回
            getLongBall(value){
                let index = this.selectDanBall.indexOf(value)

                if( !this.conditionFn(value, 'BileCode') ) return ;

                if(index > -1){
                    this.selectDanBall.splice(index,1);
                }else{

                    if( !!this.maxDanBall && this.selectDanBall.length >= this.maxDanBall ) {
                        modal.toast({ message: `最多可选${this.maxDanBall}个胆码`})
                        return false;
                    }
                    
                    this.selectDanBall.push(value);
                }

                this.fliterDan()

                this.emitFn('castDanBallList', this.selectDanBall)
            },

            fliterDan(){
                this.selectBall.forEach((value, index)=>{
                    if( this.selectDanBall.indexOf(value) > -1  ) {
                        this.selectBall.splice(index, 1)
                    }
                })
            },

            // 传传参
            emitFn(name, value) {
                this.identification !== '' ? this.$emit(name, value, this.identification) : this.$emit('castBallList', value)
            },

            // 过滤条件
            conditionFn(value, type) {
                let state = true

                if( !!this.errorCallbak ) {
                    state = this.errorCallbak({
                        'ball' : this.selectBall,
                        'DanBall' : this.selectDanBall,
                        'value' : value,
                        'type'  : type,
                        'name': this.identification
                    })
                }


                return state
            }
            
        },

        mounted(){

            if(!Array.isArray(this.ballSection) ) {
                modal.toast({ message: `不是一个有效的球的区间`})
                return;
            }

            if( !(typeof this.ballLenth === 'number') || this.ballLenth < 1) {
                modal.toast({ message: `请输入一个有效的球长度`})
                return;
            }
            
            this.ballMark = this.generateBall()
        }
    }
</script>

<style>
    .gc-ball-list {
        display: flex;
        flex-direction: row;
        width:100%;
    }

    .ball-list-con{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .ball-list-r {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;  
    }
   .ball-title{
        width:100px;
        display: flex;
        justify-content: center;
        
    }


    .ball-title-title {
        font-family: PingFangSC-Medium;
        font-size: 34px;
        color: #333333;
    }
    /* .ball-list-c{
        flex: 7;
    }  */
</style>
